import BoxItem from '@/components/BoxItem';
import { Button, Col, DatePicker, Flex, Form, Input, Row, Space } from 'antd';
import { useState } from 'react';
import CustomTable from '../components/CustomTable';

// 时间范围快捷选择
const dateRanges = [
	{ label: '今天', value: 'today' },
	{ label: '近七天', value: 'last7days' },
	{ label: '近三十天', value: 'last30days' },
	{ label: '近三个月', value: 'last3months' }
];

// 表格列定义
const columns = [
	{
		title: '客户编码',
		dataIndex: 'customerCode',
		key: 'customerCode'
	},
	{
		title: '客户名称',
		dataIndex: 'customerName',
		key: 'customerName'
	},
	{
		title: '客户昵称',
		dataIndex: 'customerNickname',
		key: 'customerNickname'
	},
	{
		title: '发货笔数',
		dataIndex: 'deliveryCount',
		key: 'deliveryCount',
		render: (text: number) => <span>{text} 次</span> // 格式化显示发货笔数
	},
	{
		title: '实付金额',
		dataIndex: 'paidAmount',
		key: 'paidAmount',
		render: (text: number) => <span>{text.toFixed(2)} 元</span> // 格式化实付金额
	},
	{
		title: '运费',
		dataIndex: 'shippingCost',
		key: 'shippingCost',
		render: (text: number) => <span>{text.toFixed(2)} 元</span> // 格式化运费
	},
	{
		title: '快递成本',
		dataIndex: 'expressCost',
		key: 'expressCost',
		render: (text: number) => <span>{text.toFixed(2)} 元</span> // 格式化快递成本
	}
];

// 假数据
const data = [
	{
		key: '1',
		customerCode: 'C001',
		customerName: '客户A',
		customerNickname: '小A',
		deliveryCount: 5,
		paidAmount: 1200.5,
		shippingCost: 50.0,
		expressCost: 30.0
	},
	{
		key: '2',
		customerCode: 'C002',
		customerName: '客户B',
		customerNickname: '小B',
		deliveryCount: 3,
		paidAmount: 850.75,
		shippingCost: 40.0,
		expressCost: 25.0
	},
	{
		key: '3',
		customerCode: 'C003',
		customerName: '客户C',
		customerNickname: '小C',
		deliveryCount: 7,
		paidAmount: 2200.0,
		shippingCost: 60.0,
		expressCost: 40.0
	},
	{
		key: '4',
		customerCode: 'C004',
		customerName: '客户D',
		customerNickname: '小D',
		deliveryCount: 10,
		paidAmount: 3200.0,
		shippingCost: 70.0,
		expressCost: 50.0
	},
	{
		key: '5',
		customerCode: 'C005',
		customerName: '客户E',
		customerNickname: '小E',
		deliveryCount: 6,
		paidAmount: 1500.0,
		shippingCost: 55.0,
		expressCost: 35.0
	}
];

export default function CustomerDetails() {
	const [keyword, setKeyword] = useState('');
	const [startDate, setStartDate] = useState(null);
	const [endDate, setEndDate] = useState(null);

	const handleSearch = () => {
		console.log('执行搜索，关键词:', keyword, '起始时间:', startDate, '结束时间:', endDate);
		// 在这里实现实际的搜索逻辑，例如调用接口
	};

	const resetFilters = () => {
		setKeyword(''); // 重置关键词
		setStartDate(null); // 重置开始时间
		setEndDate(null); // 重置结束时间
	};

	// 时间范围快捷选择
	const handleDateChange = (value: string) => {
		const today = new Date();
		let startDate: any = null;
		let endDate: any = today;

		switch (value) {
			case 'today':
				startDate = endDate;
				break;
			case 'last7days':
				startDate = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000);
				break;
			case 'last30days':
				startDate = new Date(today.getTime() - 30 * 24 * 60 * 60 * 1000);
				break;
			case 'last3months':
				startDate = new Date(today.getFullYear(), today.getMonth() - 3, today.getDate());
				break;
			default:
				break;
		}

		setStartDate(startDate);
		setEndDate(endDate);
	};

	return (
		<div>
			<BoxItem>
				<Flex gap="small" wrap>
					<Button>导出</Button>
				</Flex>
			</BoxItem>
			<BoxItem>
				<Form layout="inline" onFinish={handleSearch}>
					<Row gutter={16} justify="start">
						{/* 关键词输入框 */}
						<Col>
							<Form.Item label="关键词" name="keyword">
								<Input
									value={keyword}
									onChange={e => setKeyword(e.target.value)}
									placeholder="请输入关键词"
									style={{ width: 160, marginBottom: '20px' }}
								/>
							</Form.Item>
						</Col>

						{/* 起止时间 */}
						<Col>
							<Form.Item label="业务时间" name="startDate">
								<DatePicker
									value={startDate}
									onChange={date => setStartDate(date)}
									style={{ width: 180 }}
									placeholder="起始时间"
									allowClear
								/>
							</Form.Item>
						</Col>
						<Col>
							<Form.Item label="至" name="endDate">
								<DatePicker
									value={endDate}
									onChange={date => setEndDate(date)}
									style={{ width: 180 }}
									placeholder="结束时间"
									allowClear
								/>
							</Form.Item>
						</Col>

						{/* 快捷时间选择 */}
						<Col>
							<Space>
								{dateRanges.map(({ label, value }) => (
									<Button key={value} onClick={() => handleDateChange(value)}>
										{label}
									</Button>
								))}
							</Space>
						</Col>

						{/* 搜索和重置按钮 */}
						<Col>
							<Button type="primary" htmlType="submit">
								搜索
							</Button>
							<Button type="default" onClick={resetFilters}>
								重置
							</Button>
						</Col>
					</Row>
				</Form>
			</BoxItem>
			<BoxItem>
				<CustomTable dataSource={data} columns={columns} rowKey="key" pagination={true} />
			</BoxItem>
		</div>
	);
}
